<script setup>

import {ref} from 'vue';
import * as commonDict from '@/utils/commonDict.js';
import * as userApi from '@/api/userApi.js'
import {message} from 'ant-design-vue';
import {fetchUserOne} from '@/api/userApi.js';

const open = ref(false)
const loading = ref(false)

const form = ref({
  userId: '',
  account: '',
  username: '',
  avatar: '',
  gender: '1',
  email: '',
  phone: ''
})

const formRef = ref(null)
const emits = defineEmits(['saveSuccessful'])

const onOpen = (userId) => {
  if (userId) {
    getUserOne(userId)
  }
  open.value = true
}
const onClose = () => {
  open.value = false
}

const getUserOne = (userId) => {
  fetchUserOne(userId).then(res => {
    form.value = res
  })
}

const summit = () => {
  loading.value = true
  formRef.value.validate().then(() => {
    if (form.value.userId) {
      userApi.editUser(form.value).then(() => {
        message.success('用户编辑成功')
        emits('saveSuccessful')
        onClose()
      })
    } else {
      userApi.createAccount(form.value).then(() => {
        message.success('用户添加成功')
        emits('saveSuccessful')
        onClose()
      })
    }

  }).finally(() => {
    loading.value = false
  })

}

defineExpose({
  onOpen
})

</script>

<template>
  <a-drawer
      title="用户新增"
      :width="600"
      :open="open"
      @close="onClose"
      :body-style="{ paddingBottom: '80px' }"
      :footer-style="{ textAlign: 'right' }"
  >

    <a-form :model="form" ref="formRef" layout="vertical">
      <a-row :gutter="24">
        <a-col :span="12">

          <a-form-item
              :rules="[{ required: true, message: '请输入账号' }]"
              label="账号"
              name="account"
          >
            <a-input
                placeholder="请输入账号"
                v-model:value="form.account"></a-input>
          </a-form-item>

        </a-col>
        <a-col :span="12">

          <a-form-item
              :rules="[{ required: true, message: '请输入用户名' }]"
              label="用户名"
              name="username"
          >
            <a-input
                placeholder="请输入用户名"
                v-model:value="form.username"></a-input>
          </a-form-item>

        </a-col>

      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item
              :rules="[{ required: true, message: '请选择性别' }]"
              label="性别"
              name="gender"
          >
            <a-radio-group v-model:value="form.gender">
              <a-radio :value="item" :key="item" v-for="item in Object.keys(commonDict.genderType).reverse()">
                {{ commonDict.genderType[item] }}
              </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item
              :rules="[{ required: false, message: '请输入邮箱' }]"
              label="邮箱"
              name="email"
          >
            <a-input
                placeholder="请输入邮箱"
                v-model:value="form.email"></a-input>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item
              :rules="[{ required: false, message: '请输入手机号' }]"
              label="手机号"
              name="phone"
          >
            <a-input
                placeholder="请输入邮箱"
                v-model:value="form.phone"></a-input>
          </a-form-item>
        </a-col>
      </a-row>

    </a-form>


    <template #footer>
      <a-space>
        <a-button @click="onClose">关闭</a-button>
        <a-button :loading="loading" type="primary" @click="summit">提交</a-button>
      </a-space>
    </template>

  </a-drawer>
</template>

<style scoped>

</style>
